<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见指令</title>
</head>
<body>

<!--
  显示和隐藏指令
  v-if     true   显示    false  隐藏     通过节点对象的添加和删除实现元素的显示和隐藏
  v-show   true   显示    false  隐藏     通过在标签中添加 display属性 实现元素的隐藏

  如何选择?    显示和隐藏的操作 比较频繁 推荐使用  v-show
-->
<div id="app">

    <button v-if="isShow">v-if普通按钮1</button>
    <button v-show="isShow">v-show普通按钮2</button>
    <button @click="showOrHidden">控制按钮的显示和隐藏</button>
</div>

<script src="../vue.js"></script>

<script>
    const vm = new Vue({
        el:'#app',
        data:{
            isShow: false
        },
        methods:{
            showOrHidden(){
                this.isShow = !this.isShow
            }
        }
    })
</script>
</body>
</html>